<template>
	<view class="code-details-wrap">
		<uni-popup ref="popup" background-color="#fff" :borderRadius="'20rpx'" style="width:90%;"
			:custom="true" :mask-click="true">
			<view class="pop-content" >
				<view class="header">查看更多</view>
				<view class="codes-list c-flex jc-between c-flex-wrap">
					<view class="code-item" v-for="(item,i) in source" :key="i">
						<text>{{item}}</text>
						<text class="close" v-if="isEdit" @click="onDele(item)">x</text>
					</view>
				</view>
				<view class="oper-con c-flex jc-between c-item-center" v-if="isEdit">
					<view class="c-flex-1" @click="onCancel">取消</view>
					<view class="c-flex-1" @click="onConfirm">确定</view>
				</view>	
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		props:{
			isEdit:{
				type:Boolean,
				default:false
			},
			list:{
				type:Array,
				default:[]
			}
		},
		data(){
			return {
				source:[]
			}
		},
		watch:{
			list:{
				immediate: true,
				handler(newVal, oldVal) {
					this.source = [...newVal];
				}
			}
		},
		methods:{
			onOpen(val){
				this.$refs.popup.open('center')
			},
			onClose(){
				this.$refs.popup.close()
			},
			onDele(id){
				this.source = this.source.filter(item=>{return item != id});
			},
			onCancel(){
				this.source = [...this.list];
				this.$refs.popup.close();
			},
			onConfirm(){
				this.$emit('onConfirm',this.source)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.code-details-wrap{
		.pop-content{
			background: #fff;border-top-left-radius: 30rpx;width:660rpx;
			border-top-right-radius: 30rpx;border: 1rpx solid #fff;position: relative;
			.header{
				font-weight: 500;font-size: 30rpx;color: #030303;    text-align: center;
			}
			.codes-list{
				gap:10rpx;    overflow-y: scroll;    max-height: 520rpx;padding: 20rpx;
				.code-item{
					flex-basis: 46%;text-align: center;background: #f5f5f5; padding: 10rpx;border-radius: 6rpx;
					.close{
						display: inline-block;width:40rpx;height:40rpx;background: #969696;border-radius: 50%;color: #ffffff;
						margin-left: 12rpx; transform: scale(0.7);
					}
				}
			}
		}
		.oper-con{
			margin:50rpx 0;text-align:center;
			view:first-child{font-weight: 500;font-size: 30rpx;color: #030303;}
			view:last-child{font-weight: 500;font-size: 30rpx;color: #E86748;}
		}
	}
</style>
<style>
	.uni-popup .uni-popup__wrapper{
		width: 80%;border-radius: 20rpx;overflow: hidden;
	}
</style>